<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
    .longtime{
      font-family: "Arial Black";
    }
  </style>
</head>
<body>

 <div id="app">
   {{msg}}
   <h3 class="longtime" :class="{active:isActive}">{{msg}}</h3>
   <h3 class="longtime" :class="getClasses()">{{msg}}</h3>
   <button @click="trigger">切换颜色</button>
 </div>
 <script src="../vue.js"></script>
 <script>
   //参数为对象类型
   const vm=new Vue({
     el:"#app",
     data:{
       msg:"hello",
       isActive:true
     },
     methods:{
      trigger(){
        this.isActive=!this.isActive
      },
       getClasses(){
        return {active:this.isActive}
       }
     }
   })
 </script>
</body>
</html>